<template>
	<view>
		<!-- <canvas canvas-id="myCanvas" style="width: 300px; height: 200px;"></canvas> -->
		<view style="width: 500px;height: 400px;" id="firstContainer"></view>
	</view>
</template>

<script>
	
	
	import {
		createChart,

	} from 'lightweight-charts';




	import dataall from '../../data.json'
	export default {
		data() {
			return {
				canvasWidth: 300,
				canvasHeight: 200,
				hourLines: 24,
				lineHeight: 10,
				lineColor: '#ddd'
			};
		},
		onReady() {
			this.drawHourlyChart();
		},
		methods: {
			msToS(milliseconds) {
				return Math.floor(milliseconds / 1000);
			},
			drawHourlyChart() {
				// console.log(createChartEx());

				const chartOptions = {
					layout: {
						textColor: 'black',
						background: {
							type: 'solid',
							color: 'white'
						},
						KineticScrollOptions: {
							touch: false
						}
					},
					session: {
						enabled: true,
						timezone: 'Etc/UTC',
						sessions: [{
								start: '06:00',
								end: '07:00'
							},
							{
								start: '07:00',
								end: '15:00'
							},
							{
								start: '15:00',
								end: '23:00'
							},
						],
					},

				};



				let data1 = dataall.data.chart_data.reverse();
				var t = []
				data1.map((item) => {
					var seconds = this.msToS(item.timestamp);
					// .toISOString()
					const date = new Date(item.timestamp)

					const year = date.getFullYear()
					const month = `${date.getMonth() + 1}`.padStart(2, '0')
					const day = `${date.getDate()}`.padStart(2, '0')
					const hours = date.getHours(); // 返回 0-23 之间的整数
					const minutes = date.getMinutes(); // 返回 0-59 之间的整数
					const seconds1 = String(date.getSeconds()).padStart(2, '0');
					// 格式化为两位数（如果需要）
					const formattedHours = String(hours).padStart(2, '0');
					const formattedMinutes = String(minutes).padStart(2, '0');
					let text = `${year}-${month}-${day}T${formattedHours}:${formattedMinutes}:${seconds1}`

					console.log(text);
					let m = {
						time: new Date(text).getTime() / 1000,
						value: item.close
					}
					t.push(m)
				})
				// console.log(t);

				const chart = createChart(document.getElementById('firstContainer'), chartOptions);

				chart.applyOptions({
					localization: { // 设置x周时间格式
						dateFormat: "yyyy-MM-dd",
					},
					interval: "1",
					timezone: "Etc/UTC",
					TickMarkType:'year',
					autosize: true,
					session: {
						// enabled: true,
						// timezone: 'Etc/UTC',

					},
					timeWeight: 1000 * 60 * 60,
					handleScroll: false,

					kineticScroll: false,

					// datafeed: new FeedBase(),
					rightPriceScale: {
						// scaleMargins: {
						// 	top: 0.3, // leave some space for the legend
						// 	bottom: 0.25,
						// },
					},
					crosshair: {
						// hide the horizontal crosshair line
						// horzLine: {
						// 	visible: false,
						// 	labelVisible: false,
						// },
					},
					// hide the grid lines
					grid: {
						vertLines: {
							visible: false,
						},
						horzLines: {
							visible: false,
						},
					},
				});
				const areaSeries = chart.addAreaSeries({
					topColor: '#2962FF',
					bottomColor: 'rgba(41, 98, 255, 0.28)',
					lineColor: '#2962FF',
					lineWidth: 1,
					timeWeight: 1000 * 60 * 60,
					crossHairMarkerVisible: true,
				});

				const data = t

				let ml = data
				// console.log(data.reverse());
				areaSeries.setData(
					ml
				);

	
				chart.timeScale().applyOptions({
					visible: true,
					borderVisible: true,
					fixLeftEdge: true,
					barSpacing:1,
					TickMarkType:'year',
					// minBarSpacing:4,
					// fixRightEdge: true,
					rightOffset: 180,
					leftOffset: 0,
					// TimeMark
					lockVisibleTimeRangeOnResize: false,
					rightBarStaysOnScroll: false,
					// borderColor: '#FF0000',
					timeVisible: true,
					secondsVisible: false,
					timeWeight: 1000 * 60 * 60,
					// tickMarkMaxCharacterLength:4,
					
					TimeMark: [{
							time: '2025-01-17T06:00',
							color: 'red',
							label: 'Opening'
						},
						{
							time: '2025-01-17T07:10',
							color: 'green',
							label: 'Break'
						},
						{
							time: '2025-01-17T15:00',
							color: 'blue',
							label: 'Lunch'
						},
						{
							time: '2025-01-18T23:00',
							color: 'purple',
							label: 'Closing'
						},
					],

				});
				// chart.timeScale().setVisibleRange({
				// 	from: new Date('2025-01-16T00:00:00.000Z').getTime(),
				// 	to: new Date('2025-01-17T10:00:00.000Z').getTime()
				// });

				// const fixedTimes = [
				//       new Date('2025-01-20T06:00:00.000Z').getTime(),
				//       new Date('2025-01-20T07:00:00.000Z').getTime(),
				//       new Date('2025-01-20T15:00:00.000Z').getTime(),
				//       new Date('2025-01-20T23:00:00.000Z').getTime(),
				//     ];

				//     // 手动添加时间点到图表中
				//     fixedTimes.forEach((time) => {
				//       areaSeries.appendData({ time, value: null });
				//     });

				
				chart.timeScale().fitContent();


				// areaSeries.update({ time: '2025-2-18 10:00', value: 25 });
				// chart.timeScale().fitContent();

			}
		}
	}
</script>

<style>
	/* 样式按需添加 */
</style>